<style scoped lang="less">
  .my-portrait{
    overflow: hidden;
  }
  .portrait-box{
    img{
      display: block;
      width:200px;
    }
  }
  .ryt{
    font-size: 22px;
    color: #258AFE;
    padding: 50px;
    letter-spacing: 2px;
  }
  .change-text{
    width: 100px;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    margin: 0 auto;
    line-height: 30px;
    border-radius: 17px;
    border: 2px solid #aaa;
    cursor: pointer;
    color: #aaa;
  }
  .editor{
    padding-top: 50px;
  }
  .item-name{
    text-align: right;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .label{
    padding-left: 40px;
    overflow: hidden;
    li{
      width: 25%;
      padding-top: 40px;
      .label-item{
        cursor: pointer;
        width: 150px;
        text-align: center;
        color: #888;
        border: 2px solid #888;
        line-height: 32px;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 2px;
      }
    }
  }
  .active{
    border-color: #0E96FF !important;
    color: #0E96FF !important;
  }
  .btns{
    padding-top: 20px;
    .btn{
      width: 200px;
      margin: 30px auto 0;
      font-size: 18px;
      letter-spacing: 1px;
      text-align: center;
      cursor: pointer;
    }
    .save-btn{
      line-height: 40px;
      color: #fff;
      background: url("../../../static/image/ts_2.png");
    }
    .edi-cancel-btn{
      line-height: 38px;
      border: 1px solid #888;
      color: #888
    }
  }
</style>
<style lang="less">
  .edi-ipt{
    .ivu-input{
      font-size: 15px !important;
    }
  }
</style>
<template>
  <div id="editor">
    <div class="my-portrait">
      <div class="left portrait-box">
        <img :src="perInfo.headimg">
      </div>
      <div class="left">
        <p class="ryt">
          我的头像
        </p>
        <p @click="cropperPic = true" class="change-text">
          更换头像
        </p>
      </div>
      <div class="clear"></div>
    </div>
    <div>
      <Form class="editor">
        <Form-item class="form-item">
          <Row :gutter="20">
            <i-col :span="4" class="item-name">
              姓名
              <span style="font-size: 13px; color: #aaa;letter-spacing: 0">
                (必填)
              </span>
            </i-col>
            <i-col :span="12">
              <i-input v-model="name" class="edi-ipt" placeholder="请输入您的姓名"></i-input>
            </i-col>
          </Row>
        </Form-item>
        <Form-item class="form-item">
          <Row :gutter="20">
            <i-col :span="4" class="item-name">
              所在城市
            </i-col>
            <i-col :span="6">
              <Cascader class="edi-ipt" placeholder="选择省份" @on-change="changeProvince"  :value.sync="province" :data="provinceList"></Cascader>
            </i-col>
            <i-col :span="6">
              <Cascader class="edi-ipt" placeholder="选择城市" @on-change="changeCity" :value.sync="city" :data="cityList"></Cascader>
            </i-col>
          </Row>
        </Form-item>
        <Form-item class="form-item">
          <Row :gutter="20">
            <i-col :span="4" class="item-name">
              手机号
              <span style="font-size: 13px; color: #aaa;letter-spacing: 0">
                (必填)
              </span>
            </i-col>
            <i-col :span="12">
              <i-input v-model="mobile" class="edi-ipt" placeholder="请输入您的手机号"></i-input>
            </i-col>
          </Row>
        </Form-item>
        <Form-item class="form-item">
          <Row :gutter="20">
            <i-col :span="4" class="item-name">
              现在开的车型
            </i-col>
            <i-col :span="4">
              <Cascader class="edi-ipt" placeholder="选择品牌" :value.sync="nowCarPName" @on-change="changeNowP" :data="nowCarP"></Cascader>
            </i-col>
            <i-col :span="4">
              <Cascader class="edi-ipt" placeholder="选择车系" :value.sync="nowCarSName" @on-change="changeNowS" :data="nowCarS"></Cascader>
            </i-col>
            <i-col :span="4">
              <Cascader class="edi-ipt" placeholder="选择车型" :value.sync="nowCarXName" @on-change="changeNowX" :data="nowCarX"></Cascader>
            </i-col>
          </Row>
        </Form-item>
        <Form-item class="form-item">
          <Row :gutter="20">
            <i-col :span="4" class="item-name">
              喜欢的车型
            </i-col>
            <i-col :span="4">
              <Cascader class="edi-ipt" placeholder="选择品牌" :value.sync="likeCarPName" @on-change="changeLikeP" :data="likeCarP"></Cascader>
            </i-col>
            <i-col :span="4">
              <Cascader class="edi-ipt" placeholder="选择车系" :value.sync="likeCarSName" @on-change="changeLikeS" :data="likeCarS"></Cascader>
            </i-col>
            <i-col :span="4">
              <Cascader class="edi-ipt" placeholder="选择车型" :value.sync="likeCarXName" @on-change="changeLikeX" :data="likeCarX"></Cascader>
            </i-col>
          </Row>
        </Form-item>
        <Form-item class="form-item">
          <Row :gutter="20">
            <i-col :span="4" class="item-name">
              职业类型
            </i-col>
            <i-col :span="12">
              <i-input v-model="work" class="edi-ipt" placeholder="请输入您的职业类型"></i-input>
            </i-col>
          </Row>
        </Form-item>
      </Form>
    </div>
    <div class="like">
      <div>
        <Row :gutter="20" style="overflow: hidden">
          <i-col :span="4" class="item-name">
            喜欢的标签
          </i-col>
        </Row>
      </div>
      <div>
        <div class="label">
          <ul>
            <li v-for="(label, index) in labelList" class="left" @click="chooseLabel(index)">
              <div class="label-item" :class="label.selected? 'active' : ''">
                {{ label.la_name }}
              </div>
            </li>
            <div class="clear"></div>
          </ul>
        </div>
      </div>
    </div>
    <div class="btns">
      <ul style="padding: 0 200px;">
        <li class="left" style="width: 50%;">
          <div @click="subEdi" class="btn save-btn">
            保存修改
          </div>
        </li>
        <li class="left" style="width: 50%;">
          <div @click="$router.push('/Personal/PersonalInfo')" class="btn edi-cancel-btn">
            取消
          </div>
        </li>
      </ul>
      <div class="clear"></div>
    </div>
    <div v-if="cropperPic" @mousewheel.prevent class="cropper-pic">
      <div class="cropper-index" style="display:block;">
        <div class="info-item" style="flex:1;">
          <label class="btn btn-orange" for="uploads"
                 style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;">选择图片</label>
          <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);"
                 accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
          <input type="button" class="oper"
                 style="line-height: 20px;height:20px;width:23px;font-size:20px;margin:3px 5px;transform: translateY(2px);overflow: visible"
                 value="+" title="放大" @click="changeScale(1)">
          <input type="button" class="oper"
                 style="line-height: 20px;height:20px;width:23px;font-size:20px;margin:3px 5px;transform: translateY(2px);overflow: visible"
                 value="-" title="缩小" @click="changeScale(-1)">
          <input type="button" class="oper"
                 style="line-height: 20px;height:20px;width:23px;font-size:20px;margin:3px 5px;transform: translateY(2px);overflow: visible"
                 value="↺" title="左旋转" @click="rotateLeft">
          <input type="button" class="oper"
                 style="line-height: 20px;height:20px;width:23px;font-size:20px;margin:3px 5px;transform: translateY(2px);overflow: visible"
                 value="↻" title="右旋转" @click="rotateRight">
        </div>
        <div class="line" style="margin-top: 10px;">
          <div class="cropper-content">
            <div class="cropper">
              <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :fixedBox="option.fixedBox"
                @realTime="realTime"
              ></vueCropper>
            </div>
            <div style="margin-left:20px;">
              <div class="show-preview"
                   :style="{'width': '150px', 'height':'155px',  'overflow': 'hidden', 'margin': '5px'}">
                <div :style="previews.div" class="preview">
                  <img :src="previews.url" :style="previews.img">
                </div>
              </div>
              <div @click="finish('blob')" class="cancel-btn">
                确定更换
              </div>
              <div @click="cancelChangeImg" class="cancel-btn">
                取消
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {VueCropper} from 'vue-cropper'
  export default {
    name: 'PersonalEditor',
    components: {
      VueCropper
    },
    data () {
      return {
        perInfo: {},
        test: true,
        name: '',
        mobile: '',
        work: '',
        labelList: [],

        province: [],
        provinceName: '',
        provinceList: [],
        city: [],
        cityName: '',
        cityList: [],

        nowCarP: [],
        nowCarPName: [],
        nowCarS: [],
        nowCarSName: [],
        nowCarX: [{
          value: '3',
          label: '奥迪'
        }],
        nowCarXName: [],
        nowCarIdP: -1,
        nowCarIdS: -1,
        nowCarIdX: -1,

        likeCarP: [],
        likeCarPName: [],
        likeCarS: [],
        likeCarSName: [],
        likeCarX: [],
        likeCarXName: [],
        likeCarIdP: -1,
        likeCarIdS: -1,
        likeCarIdX: -1,

        // 图片裁剪
        previews: {},
        imgData: {},
        option: {},
        optionBak: {
          img: '',
          outputSize: 1,
          full: false,
          outputType: 'png',
          canMove: true,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          autoCropWidth: 150,
          autoCropHeight: 150,
          fixedBox: true
        },
        fileName: '',
        imgFile: '',
        cropperPic: false
      }
    },
    methods: {
      verify: function () {
        let that = this
        that.myInfo()
      },
      // 获取个人信息
      myInfo: function () {
        let that = this
        that.$chaos.ajax({
          url: '/User/getUserData',
          userinfo: true,
          callback: function (type, res) {
            if (type === 'success') {
              let perInfo = res.result.list
              that.perInfo = perInfo
              if (perInfo.province) {
                that.provinceList = [{
                  value: that.perInfo.province,
                  label: that.perInfo.province
                }]
                that.province[0] = that.perInfo.province
              }
              if (perInfo.city) {
                that.cityList = [{
                  value: that.perInfo.city,
                  label: that.perInfo.city
                }]
                that.city[0] = that.perInfo.city
              }
              that.name = that.perInfo.nickname
              that.mobile = that.perInfo.mobile
              that.work = that.perInfo.work
              // 现在的车型
              if (perInfo.now_car_ca_pid) {
                that.nowCarP = [{
                  value: perInfo.now_car_ca_pid,
                  label: perInfo.now_car_ca_pname
                }]
                let nowPid = perInfo.now_car_ca_pid
                that.nowCarPName[0] = nowPid
              }
              if (perInfo.now_car_ca_id) {
                that.nowCarS = [{
                  value: perInfo.now_car_ca_id,
                  label: perInfo.now_car_ca_name
                }]
                let nowid = perInfo.now_car_ca_id
                that.nowCarSName[0] = nowid
                that.getCarSNow(perInfo.now_car_ca_pid)
              }
              if (perInfo.now_car_id) {
                that.nowCarX = [{
                  value: perInfo.now_car_id,
                  label: perInfo.now_car
                }]
                let nowXid = perInfo.now_car_id
                that.nowCarXName[0] = nowXid
                that.getCarXNow(perInfo.now_car_ca_id)
              }
              // 喜欢的车型
              if (perInfo.like_car_ca_pid) {
                that.likeCarP = [{
                  value: perInfo.like_car_ca_pid,
                  label: perInfo.like_car_ca_pname
                }]
                let likePid = perInfo.like_car_ca_pid
                that.likeCarPName[0] = likePid
              }
              if (perInfo.like_car_ca_id) {
                that.likeCarS = [{
                  value: perInfo.like_car_ca_id,
                  label: perInfo.like_car_ca_name
                }]
                let likeid = perInfo.like_car_ca_id
                that.likeCarSName[0] = likeid
                that.getCarSNow(perInfo.like_car_ca_pid)
              }
              if (perInfo.like_car_id) {
                that.likeCarX = [{
                  value: perInfo.like_car_id,
                  label: perInfo.like_car
                }]
                let likeXid = perInfo.like_car_id
                that.likeCarXName[0] = likeXid
                that.getCarXNow(perInfo.like_car_ca_id)
              }
              that.getProvince()
              that.getLabelList()
              that.getCarP()
            }
          }
        })
      },
      // 获取省市
      getProvince: function () {
        let that = this
        that.$chaos.ajax({
          url: '/User/getAddress',
          data: {
            id: 0
          },
          callback: function (type, res) {
            if (type === 'success') {
              let list = res.result.list
              for (let i in list) {
                that.provinceList[i] = {
                  value: res.result.list[i].id,
                  label: res.result.list[i].name
                }
                if (res.result.list[i].name === that.perInfo.province) {
                  that.province[0] = res.result.list[i].id
                }
              }
              // that.getCity()
            }
          }
        })
      },
      changeProvince: function (value, selectedData) {
        this.cityList = []
        this.city = []
        if (selectedData.length === 0) {
          this.province[0] = -1
          this.provinceName = ''
          return false
        }
        this.provinceName = selectedData[0].label
        this.province[0] = value[0]
        this.getCity()
      },
      getCity: function () {
        let that = this
        let id = that.province[0]
        that.$chaos.ajax({
          url: '/User/getAddress',
          data: {
            id: id
          },
          callback: function (type, res) {
            if (type === 'success') {
              let list = res.result.list
              for (let i in list) {
                that.cityList[i] = {
                  value: res.result.list[i].id,
                  label: res.result.list[i].name
                }
                if (res.result.list[i].name === that.perInfo.city) {
                  that.city[0] = res.result.list[i].id
                }
              }
            }
          }
        })
      },
      changeCity: function (value, selectedData) {
        if (selectedData.length === 0) {
          this.cityName = ''
          return false
        }
        this.cityName = selectedData[0].label
      },
      // 获取车的品牌
      getCarP: function () {
        let that = this
        that.$chaos.ajax({
          url: '/Car/getCarTypeList',
          callback: function (type, res) {
            if (type === 'success') {
              that.nowCarP = res.result.list
              that.likeCarP = res.result.list
            }
          }
        })
      },
      // 现在的车型
      changeNowP: function (val, sel) {
        this.nowCarS = []
        this.nowCarSName = []
        this.nowCarX = []
        this.nowCarXName = []
        if (val.length !== 0) {
          let id = val[0]
          this.nowCarIdP = id
          this.getCarSNow(id)
        } else {
          this.nowCarIdP = -1
          this.nowCarIdS = -1
          this.nowCarIdX = -1
        }
      },
      getCarSNow: function (id) {
        let that = this
        that.$chaos.ajax({
          url: '/Car/getCarCateNextList',
          data: {
            ca_id: id
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.nowCarS = res.result.list
            }
          }
        })
      },
      changeNowS: function (val, sel) {
        this.nowCarX = []
        this.nowCarXName = []
        if (val.length !== 0) {
          let id = val[0]
          this.nowCarIdS = id
          this.getCarXNow(id)
        } else {
          this.nowCarIdS = -1
          this.nowCarIdX = -1
        }
      },
      getCarXNow: function (id) {
        let that = this
        that.$chaos.ajax({
          url: '/Car/getCarList',
          data: {
            cate_id: id
          },
          callback: function (type, res) {
            if (type === 'success') {
              let list = res.result.list
              for (let i in list) {
                that.nowCarX[i] = {
                  value: list[i].mo_id,
                  label: list[i].mo_name
                }
              }
            }
          }
        })
      },
      changeNowX: function (val, sel) {
        if (val.length !== 0) {
          let id = val[0]
          this.nowCarIdX = id
        } else {
          this.nowCarIdX = -1
        }
      },
      // 喜欢的车型
      changeLikeP: function (val, sel) {
        this.likeCarS = []
        this.likeCarSName = []
        this.likeCarX = []
        this.likeCarXName = []
        if (val.length !== 0) {
          let id = val[0]
          this.likeCarIdP = id
          this.getCarSLike(id)
        } else {
          this.likeCarIdP = -1
          this.likeCarIdS = -1
          this.likeCarIdX = -1
        }
      },
      getCarSLike: function (id) {
        let that = this
        that.$chaos.ajax({
          url: '/Car/getCarCateNextList',
          data: {
            ca_id: id
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.likeCarS = res.result.list
            }
          }
        })
      },
      changeLikeS: function (val, sel) {
        this.likeCarX = []
        this.likeCarXName = []
        if (val.length !== 0) {
          let id = val[0]
          this.likeCarIdS = id
          this.getCarXLike(id)
        } else {
          this.likeCarIdS = -1
          this.likeCarIdX = -1
        }
      },
      getCarXLike: function (id) {
        let that = this
        that.$chaos.ajax({
          url: '/Car/getCarList',
          data: {
            cate_id: id
          },
          callback: function (type, res) {
            if (type === 'success') {
              let list = res.result.list
              for (let i in list) {
                that.likeCarX[i] = {
                  value: list[i].mo_id,
                  label: list[i].mo_name
                }
              }
            }
          }
        })
      },
      changeLikeX: function (val, sel) {
        if (val.length !== 0) {
          let id = val[0]
          this.likeCarIdX = id
        } else {
          this.likeCarIdX = -1
        }
      },
      // 获取个性标签
      getLabelList: function () {
        let that = this
        that.$chaos.ajax({
          url: '/User/getLabelList',
          slient: true,
          data: {
            type: '个性'
          },
          callback: function (type, res) {
            if (type === 'success') {
              let list = res.result.list
              for (let i in list) {
                list[i].selected = false
                for (let j in that.perInfo.label_id) {
                  if (that.perInfo.label_id[j] === list[i].la_id) {
                    list[i].selected = true
                  }
                }
              }
              that.labelList = list
            }
          }
        })
      },
      chooseLabel: function (index) {
        let that = this
        that.labelList[index].selected = !that.labelList[index].selected
      },
      // 提交修改
      subEdi: function () {
        let that = this
        let name = that.name
        let label = []
        let list = that.labelList
        for (let i in list) {
          if (list[i].selected) {
            label.push(list[i].la_id)
          }
        }
        let province = that.provinceName
        let city = that.cityName
        let mobile = that.mobile
        let nowCarIdX = that.nowCarIdX
        let likeCarId = that.likeCarIdX
        let work = that.work
        let data = {
          nickname: name,
          mobile: mobile,
          province: province,
          city: city,
          work: work,
          label: label
        }
        if (nowCarIdX !== -1) {
          data.now_car_id = nowCarIdX
        }
        if (likeCarId !== -1) {
          data.like_car_id = likeCarId
        }
        if (name === '') {
          that.$vux.toast.show({
            text: '请输入您的姓名',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (mobile === '') {
          that.$vux.toast.show({
            text: '请输入您的手机号码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.isMobile(mobile)) {
          that.$vux.toast.show({
            text: '手机号有误',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        that.$chaos.ajax({
          url: '/User/getUpdateUserData',
          userinfo: true,
          data: data,
          callback: function (type, res) {
            that.$emit('getAgin')
            that.$router.push('/Personal/PersonalInfo')
          }
        })
      },

      // 裁剪图片
      changeScale (num) {
        num = num || 1
        this.$refs.cropper.changeScale(num)
      },
      rotateLeft () {
        this.$refs.cropper.rotateLeft()
      },
      rotateRight () {
        this.$refs.cropper.rotateRight()
      },
      cancelChangeImg: function () {
        this.cropperPic = false
        this.option = JSON.parse(JSON.stringify(this.optionBak))
      },
      finish (type) {
        let that = this
        let fd = new FormData()
        // 输出
        if (type === 'blob') {
          this.$refs.cropper.getCropBlob((data) => {
            let img = window.URL.createObjectURL(data)
            fd.append('headimg', data)
            that.$chaos.ajax({
              url: '/User/getUpdateUserData',
              userinfo: true,
              data: fd,
              file: true,
              callback: function (type, res) {
                if (type === 'success') {
                  that.cropperPic = false
                  that.option = JSON.parse(JSON.stringify(that.optionBak))
                  that.perInfo.headimg = img
                  that.$emit('changeHeadimg', img)
                }
              }
            })
          })
        } else {
          this.$refs.cropper.getCropData((data) => {
          })
        }
      },
      realTime (data) {
        this.previews = data
      },
      uploadImg (e, num) {
        var that = this
        // 上传图片
        var file = e.target.files[0]
        that.fileName = file.name
        if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(e.target.value)) {
          that.$swal({
            title: '请选择一张图片',
            type: 'error'
          })
          return false
        }
        var reader = new FileReader()
        reader.onload = (e) => {
          let data
          if (typeof e.target.result === 'object') {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]))
          } else {
            data = e.target.result
          }
          if (num === 1) {
            that.option.img = data
          } else if (num === 2) {
            that.example2.img = data
          }
        }
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file)
      },
      setCrumbs: function () {
        let crumbs = []
        crumbs[0] = {
          title: '个人中心',
          link: ''
        }
        crumbs[1] = {
          title: '编辑信息',
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
      }
    },
    created () {
      this.option = JSON.parse(JSON.stringify(this.optionBak))
      this.setCrumbs()
      this.$emit('changeCurrent', 1)
      // this.$chaos.setTitle('平行车-编辑信息')
      this.verify()
    },
    activated () {
      this.setCrumbs()
      this.verify()
    }
  }
</script>

<style lang="less">
  .cropper-pic {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, .3);
    .cropper-index {
      background: #fff;
      width: 500px;
      position: absolute;
      padding: 20px;
      border-radius: 10px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .cancel-btn {
    width: 120px;
    line-height: 32px;
    font-size: 16px;
    color: #fff;
    background: #FF5469;
    margin: 10px auto 0;
    text-align: center;
    border-radius: 16px;
    cursor: pointer;
  }

  .info-item input {
    cursor: pointer;
  }

  .btn-orange {
    font-size: 14px;
    cursor: pointer;
  }

  .btn-blue {
    font-size: 14px;
  }

  .info {
    width: 720px;
    margin: 0 auto;
    .oper-dv {
      height: 20px;
      text-align: right;
      margin-right: 100px;
      a {
        font-weight: 500;
        &:last-child {
          margin-left: 30px;
        }
      }
    }
    .info-item {
      margin-top: 15px;
      label {
        display: inline-block;
        width: 100px;
        text-align: right;
      }
      .sel-img-dv {
        position: relative;
        .sel-file {
          position: absolute;
          width: 90px;
          height: 30px;
          opacity: 0;
          cursor: pointer;
          z-index: 2;
        }
        .sel-btn {
          position: absolute;
          cursor: pointer;
          z-index: 1;
        }
      }
    }
  }

  .cropper-content {
    display: flex;
    display: -webkit-flex;
    .cropper {
      width: 260px;
      height: 260px;
    }
    .show-preview {
      flex: 1;
      -webkit-flex: 1;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      background: url("");
      .preview {
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #cccccc;
        background: #cccccc;
        margin-left: 40px;
      }
    }
  }

  .cropper-content .show-preview .preview {
    margin-left: 0;
    border: none !important;
  }
</style>

